<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex 布局.学习笔记</title>
    <style>
        #container{
            display: flex;
            height: 300px;
            background-color: #96dc6d;
            flex-direction: row;
            flex-wrap: wrap;
            flex-flow: row wrap;
            justify-content: space-around;
            align-items: flex-start;
            align-content: center;
        }
        /**
        flex-direction: row | row-reverse | column | column-reverse;
        flex-wrap: nowrap | wrap | wrap-reverse;
        flex-flow: <flex-direction> <flex-wrap>;
        justify-content: flex-start | flex-end | center | space-between | space-around;
        align-items: flex-start | flex-end | center | baseline | stretch;
        align-content: flex-start | flex-end | center | space-between | space-around | stretch;
        */
        .inner{
            width: 100px;
            height: 100px;
            background: #8a4182;
            margin: 1px;
        }
        /**
        order: <integer>; 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
        flex-grow: <number>; 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
        flex-shrink: <number>;定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
        flex-basis: <length> | auto;
        flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
        align-self: auto | flex-start | flex-end | center | baseline | stretch;属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
        */
        #menu_floating_container{
            display: flex;
            height: 800px;
            background-color: #96dc6d;
            justify-content: flex-end;
        }
        #menu_floating_container .inner {

        }
    </style>
</head>
<body>
<h1 ><a target="_blank" href="https://www.runoob.com/w3cnote/flex-grammar.html">今晚搞定他</a></h1>

<div id="menu_floating_container">
    <div class="inner">Menu floating</div>
</div>

</body>
</html>